অ্যাঙ্গুলার গুগল চার্ট হলো Google Charts লাইব্রেরির Angular ফ্রেমওয়ার্কের জন্য একটি ইন্টিগ্রেশন, যা ডেভেলপারদের সহজেই বিভিন্ন ধরনের চার্ট তৈরি এবং পরিচালনা করতে দেয়। Angular Google Charts ব্যবহার করে, আপনি Angular অ্যাপ্লিকেশনের মধ্যে pie charts, bar charts, line charts, এবং আরও অনেক ধরনের গ্রাফিক্যাল ডেটা ভিজ্যুয়ালাইজেশন যোগ করতে পারেন।

Angular Google Charts: একটি সম্পূর্ণ গাইড

Angular Google Charts হলো Google Charts এবং Angular-এর একটি ইন্টিগ্রেশন লাইব্রেরি, যা ডেভেলপারদের Angular Framework এর মধ্যে Google Charts ব্যবহার করে ডায়নামিক এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করতে সাহায্য করে। এটি সরাসরি Google Visualization API এর উপর ভিত্তি করে তৈরি, যা দিয়ে সহজে এবং দ্রুত ডায়নামিক চার্ট তৈরি করা যায়।

Angular Google Charts এর বৈশিষ্ট্য

• Responsive Charts: Angular Google Charts ডায়নামিকভাবে responsive এবং device-friendly।
• Multiple Chart Types: এটি Bar Chart, Pie Chart, Line Chart, Column Chart ইত্যাদির মতো বিভিন্ন ধরনের চার্ট সমর্থন করে।
• Real-Time Data Binding: Google Charts-এর সাথে Angular এর শক্তিশালী data binding ফিচারটি ব্যবহৃত হয়, যার ফলে ডেটা পরিবর্তিত হলে চার্টও রিয়েল-টাইমে আপডেট হয়।
• Customizable Options: Angular Google Charts এর মাধ্যমে চার্টের color, legend, tooltip, এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করা যায়।

Angular Google Charts সেটআপের ধাপ

১. Angular Project তৈরি করুন

আপনি যদি এখনও Angular Project তৈরি না করে থাকেন, তাহলে নিচের কমান্ড দিয়ে নতুন Angular প্রজেক্ট তৈরি করুন:

ng new my-angular-google-charts
cd my-angular-google-charts

২. Angular Google Charts ইনস্টল করুন

Angular এর মধ্যে Google Charts ইন্টিগ্রেট করতে angular-google-charts প্যাকেজটি ইনস্টল করতে হবে। নিচের কমান্ডটি ব্যবহার করুন:

npm install angular-google-charts

৩. AppModule এ মডিউল ইম্পোর্ট করুন

এবার AppModule এ GoogleChartsModule ইম্পোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    GoogleChartsModule  // Import GoogleChartsModule here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

৪. Component তৈরি করুন এবং চার্ট যুক্ত করুন

এবার AppComponent এ Google Charts যুক্ত করুন এবং ডেটা ও অপশন সেটআপ করুন।

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Google Charts';

  // Chart Type
  chartType = 'BarChart';

  // Chart Data
  chartData = [
    ['Year', 'Sales', 'Expenses'],
    ['2014', 1000, 400],
    ['2015', 1170, 460],
    ['2016', 660, 1120],
    ['2017', 1030, 540]
  ];

  // Chart Options
  chartOptions = {
    title: 'Company Performance',
    hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
    vAxis: { minValue: 0 },
    chartArea: { width: '50%' },
    colors: ['#b0120a', '#ffab91']
  };
}

৫. HTML ফাইল আপডেট করুন

চার্ট প্রদর্শনের জন্য HTML Template ফাইলে নিচের কোডটি লিখুন:

<div>
  <google-chart
    [type]="chartType"
    [data]="chartData"
    [options]="chartOptions"
    width="600"
    height="400">
  </google-chart>
</div>

এখন আপনি ব্রাউজারে গিয়ে Angular Google Charts চার্টটি দেখতে পারবেন। এটি data binding এবং options customization সমর্থন করে।

বিভিন্ন ধরনের চার্ট

Angular Google Charts এর মাধ্যমে বিভিন্ন ধরনের চার্ট তৈরি করা যায়:

১. Pie Chart

chartType = 'PieChart';
chartData = [
  ['Task', 'Hours per Day'],
  ['Work', 8],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 3],
  ['Sleep', 7]
];

২. Column Chart

chartType = 'ColumnChart';
chartData = [
  ['Year', 'Sales', 'Expenses'],
  ['2014', 1000, 400],
  ['2015', 1170, 460],
  ['2016', 660, 1120],
  ['2017', 1030, 540]
];

৩. Line Chart

chartType = 'LineChart';
chartData = [
  ['Year', 'Sales'],
  ['2014', 1000],
  ['2015', 1170],
  ['2016', 660],
  ['2017', 1030]
];

সুবিধা এবং অসুবিধা

সুবিধা

1. Responsive: এটি বিভিন্ন ডিভাইসে responsive এবং scalable চার্ট তৈরি করতে সক্ষম।
2. Customizable: Google Charts এর সাহায্যে চার্টগুলোকে সহজে কাস্টমাইজ করা যায়, যেমন রঙ পরিবর্তন, টুলটিপ কাস্টমাইজেশন, এবং অ্যাক্সেসিবিলিটি ফিচার।
3. Wide Support: Angular Google Charts বিভিন্ন ধরনের চার্ট সমর্থন করে, যেমন Pie Chart, Bar Chart, Line Chart ইত্যাদি।

অসুবিধা

1. Complexity in Large Datasets: বড় ডেটাসেটের ক্ষেত্রে চার্টগুলি ধীর গতিতে লোড হতে পারে।
2. Dependency on Google Charts: এটি Google Charts API এর উপর নির্ভরশীল, যা ইন্টারনেট কানেকশন ছাড়া কাজ করতে পারে না।

শেখার সম্পদ

1. Angular Google Charts Documentation: Angular Google Charts
2. Google Charts Official Documentation: Google Charts
3. Udemy: Udemy Angular Charts

উপসংহার

Angular Google Charts হলো Angular এর মধ্যে ডায়নামিক এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করার একটি শক্তিশালী টুল। এটি ডেভেলপারদের জন্য একটি সহজ সমাধান দেয় এবং একইসঙ্গে ডেটা ভিজ্যুয়ালাইজেশনকে আরও কার্যকর করে তোলে। Angular এর শক্তিশালী ডেটা-বাইন্ডিং ফিচার এবং Google Charts এর ডায়নামিক চার্টিং ক্ষমতা মিলিয়ে, এটি একটি সহজ, কার্যকর এবং প্রফেশনাল চার্ট তৈরি করার মাধ্যম।